<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MCP Server 市场</title>
  <link rel="stylesheet" href="./style.css" />
  <style>
    .upload-area {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
      background-color: #f8f8f8;
      transition: border-color 0.3s ease;
    }

    .upload-area:hover {
      border-color: #007bff;
    }

    .file-info {
      margin-top: 10px;
      padding: 8px;
      background-color: #f0f9f0;
      border: 1px solid #d6f5d6;
      border-radius: 4px;
      color: #13542c;
      font-size: 14px;
    }
  </style>
  <link rel="stylesheet" href="../libs/font-awesome@4.7.0.min.css" />
</head>

<body>
  <div class="container">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <h2>MCP 服务</h2>
        <div class="service-type">
          <button class="tag active">所有</button>
          <button class="tag">远程</button>
          <button class="tag">本地</button>
        </div>
      </div>
      <nav class="sidebar-nav">
        <ul id="mcp-server-categories" hidden>
          <% for (let i=0; i < items.length; i++) { %>
            <li class="nav-item">
              <span>
                <%= items[i].name %>
              </span>
              <span class="nav-count">
                <%= items[i].count %>
              </span>
            </li>
            <% } %>
        </ul>
      </nav>
    </aside>

    <!-- 右侧主内容区 -->
    <main class="main">
      <div class="main-header">
        <div class="search-bar">
          <i class="fa fa-search search-icon"></i>
          <input type="text" id="search-input" placeholder="搜索MCP服务" class="search-input" />
        </div>
        <button class="btn-primary" id="createMcpBtn">创建MCP</button>
      </div>
      <div class="services-grid" id="servicesGrid" hidden>
        <% for (let i=0; i < items.length; i++) { %>
          <div class="service-card">
            <div class="card-header">
              <h3 class="card-title">
                <%= items[i].title %>
              </h3>
              <div class="card-badges">
                <span class="badge">
                  <%= items[i].mode %>
                </span>
              </div>
            </div>
            <div class="card-meta">
              <span>
                <%= items[i].tag %>
              </span>
              <span>
                <%= items[i].timeout %>
              </span>
            </div>
            <p class="card-desc">
              <%= items[i].description %>
            </p>
            <div class="card-footer">
              <a href="<%= items[i].provider_url %>">
                <%= items[i].provider %>
              </a>
              <div class="card-stats">
                <div class="stat-item">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                  </svg>
                  工具
                </div>
                <div class="stat-item">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                  </svg>
                  编辑
                </div>
                <div class="stat-item">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                    <circle cx="12" cy="10" r="3"></circle>
                  </svg>
                  删除
                </div>
              </div>
            </div>
          </div>
          <% } %>
      </div>
      <button class="load-more">加载更多</button>
    </main>
  </div>

  <!-- 创建MCP模态框 -->
  <div id="mcpModal" class="modal" hidden>
    <div class="modal-content">
      <header class="modal-header">
        <h2><%= modal_title %></h2>
        <span class="close" id="closeModal">&times;</span>
      </header>
      <main class="modal-body">
        <form id="mcpForm">
          <div class="form-group">
            <label>命名</label>
            <input type="text" name="server_name" required>
          </div>

          <div class="form-group">
            <label>名称</label>
            <input type="text" name="title" required>
          </div>

          <div class="form-group">
            <label>描述</label>
            <textarea name="description" rows="3"></textarea>
          </div>

          <div class="form-group">
            <label>类型</label>
            <select name="mode" id="modeSelect" required>
              <option value="stdio">标准输入/输出(stdio)</option>
              <option value="streamable_http">可流式传输的HTTP(streamableHttp)</option>
              <option value="sse">服务器发送事件(sse)</option>
            </select>
          </div>

          <div class="form-group" id="uploadGroup">
            <label>服务上传</label>
            <input type="file" name="file" id="fileInput" accept=".zip" hidden required>
            <div id="upload-mcp-server" class="upload-area">点击上传服务</div>
            <div id="file-info" class="file-info" style="display: none;"></div>
          </div>

          <div class="form-group" id="mcpServerUrl" style="display: none;">
            <label>URL</label>
            <textarea name="server_url" rows="1" required></textarea>
          </div>

          <div class="form-group" id="mcpServerHeaders" style="display: none;">
            <label>请求头</label>
            <textarea name="headers" rows="3"></textarea>
          </div>

          <div class="form-group">
            <label>标签</label>
            <select name="tag">
              <option value="浏览器自动化">浏览器自动化</option>
              <option value="搜索工具">搜索工具</option>
              <option value="交流协作工具">交流协作工具</option>
              <option value="开发者工具">开发者工具</option>
              <option value="娱乐与多媒体">娱乐与多媒体</option>
              <option value="文件系统">文件系统</option>
              <option value="金融">金融</option>
              <option value="知识管理与记忆">知识管理与记忆</option>
              <option value="位置服务">位置服务</option>
              <option value="文化与艺术">文化与艺术</option>
              <option value="学术研究">学术研究</option>
              <option value="日程管理">日程管理</option>
              <option value="其他">其他</option>
            </select>
          </div>

          <div class="form-group">
            <label>超时(单位: 秒)</label>
            <input type="number" name="timeout">
          </div>

          <div class="form-group">
            <label>提供者</label>
            <input type="text" name="provider">
          </div>

          <div class="form-group">
            <label>提供者网站</label>
            <textarea name="provider_url" row="1"></textarea>
          </div>

        </form>
        <div class="form-actions">
          <button class="btn-secondary" id="cancelBtn">取消</button>
          <button class="btn-primary" id="submitBtn">确认</button>
        </div>
      </main>
    </div>
  </div>

  <script src="../libs/ejs@3.1.10.min.js"></script>
  <script src="../utils.js"></script>
  <script src="./script.js"></script>
  <script>
    
  </script>
</body>

</html>